<template>
    <div>
      <!-- 导航条区域 -->
      <div class="nav_content">
        <!-- fixed-top：将导航条固定top-->
        <!-- :class="tabNav? 'yes':'no'" -->
        <nav class="navbar fixed-top navbar-expand-lg navbar-light nav_box" >
          <a class="navbar-brand title_box" href="#/blogs"><i class="el-icon-s-opportunity"></i> ~忆点点~</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <!-- style="background-color: #fff;" -->
          <div class="collapse navbar-collapse " id="navbarSupportedContent" >
            <!-- .ml-auto元素居右 .mr-auto元素居左 -->
            <form class="form-inline my-2 my-lg-0 mr-auto">
              <input class="form-control mr-sm-2" type="search" placeholder="请输入文章名搜索" aria-label="Search" @blur="clearArticleTitle(articleTitle)" v-model="articleTitle">
              <button class="btn btn-outline-success my-2 my-sm-0"  @click="submitArticleTitle(articleTitle)">搜索</button>

              <!-- <span>{{this.$store.state.user.articleTitle}}</span> -->
            </form>

            <ul class="navbar-nav ml-auto" >
              <li class="nav-item">
                <a class="nav-link" href="#/blogs"><i class="el-icon-s-home"></i> 首页 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#/blogClassify"><i class="el-icon-menu"></i> 分类</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#/blogFind"><i class="el-icon-share"></i> 友链</a>
              </li>
              <!-- <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  分类列表
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Java</a>
                  <a class="dropdown-item" href="#">Python</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Vue</a>
                  <a class="dropdown-item" href="#">Bootstrap</a>
                </div>
              </li> -->
              <li class="nav-item">
                <a class="nav-link " href="#/blogComment" ><i class="el-icon-s-comment"></i> 留言</a>
              </li>
              <li class="nav-item" v-if="userInfo !== null">
                <a class="nav-link " href="#/user/UserDetail" ><i class="el-icon-user-solid"></i> 关于</a>
              </li>
              <!-- <li>
                {{userInfo.profilePhoto}}
                url={{baseUrl}}
              </li> -->
            </ul>

            <el-dropdown>
                <el-avatar :size="50">
                      <img :src="backUrl + userInfo.profilePhoto" alt="" v-if="userInfo !== null">
                      <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="" v-else>
                  <el-button></el-button>
                </el-avatar>
              <!-- 登陆了显示 -->
              <el-dropdown-menu slot="dropdown"  v-if="userInfo !== null">
                <el-dropdown-item><a href="#/user/UserDetail" style="text-decoration:none;"><i class="el-icon-user"></i>个人中心</a> </el-dropdown-item>
                <el-dropdown-item><a href="#/user/UserEdit" style="text-decoration:none;"><i class="el-icon-edit-outline"></i> 信息设置</a></el-dropdown-item>
                <el-dropdown-item><a  style="text-decoration:none;cursor: pointer;" @click="toPasswordDialog()"><i class="el-icon-key"></i> 修改密码</a></el-dropdown-item>
                <el-dropdown-item v-show="this.$store.state.user.userInfo.roleId === 1"><a href="#/back" target="blank_" style="text-decoration:none;"><i class="el-icon-s-platform"></i> 后台管理</a></el-dropdown-item>
                <el-dropdown-item divided><a  style="text-decoration:none;cursor: pointer;" @click="toHelpDialog()"><i class="el-icon-help"></i> 帮助</a></el-dropdown-item>
                <el-dropdown-item><a href="#/login" style="text-decoration:none;" @click="back()"><i class="el-icon-lock"></i> 退出</a></el-dropdown-item>
              </el-dropdown-menu>

              <!-- 没登陆显示 -->
              <el-dropdown-menu slot="dropdown" v-else>
                <el-dropdown-item><a  style="text-decoration:none;cursor: pointer;" @click="toHelpDialog()"><i class="el-icon-help"></i> 帮助</a></el-dropdown-item>
                <el-dropdown-item><a href="#/login" style="text-decoration:none;"><i class="el-icon-sugar"></i> 登录</a></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </nav>

            <!-- 帮助提示对话框 -->
            <el-dialog
                  title="帮助提示"
                  :visible.sync="HelpDialogVisible"
                  width="30%">
                  <p>忆点点博客，体验版，仍有很多功能待开发。。。。</p>
                  <p>想要源码地址，联系1120760701@qq.com</p>
                  <span>普通用户测试账号：ctest@qq.com  密码：1314520</span><br>
                  <span>管理员测试账号：atest@qq.com  密码：1314520</span>
                  <span slot="footer" class="dialog-footer">
                      <el-button type="primary" @click="HelpDialogVisible = false">确 定</el-button>
                  </span>
            </el-dialog>

            <!-- 修改密码提示框 -->
            <el-dialog
                  title="修改密码"
                  :visible.sync="passwordDialogVisible"
                  width="30%"
                  @close="closePasswordDialog()">
                  <el-form :model="passwordForm" :rules="passwordFormRules" ref="passwordFormRef"
                  class="passwordFormClass"
                  label-width="100px" label-position="left">
                      <el-form-item label="旧密码：" prop="oldPass">
                          <el-input v-model="passwordForm.oldPass" autocomplete="off"
                          placeholder="旧密码" type="password" show-password></el-input>
                      </el-form-item>
                      <el-form-item label="新密码：" prop="pass">
                          <el-input v-model="passwordForm.pass" autocomplete="off"
                          placeholder="新密码" type="password" show-password></el-input>
                      </el-form-item>
                      <el-form-item label="确认密码：" prop="checkPass">
                          <el-input v-model="passwordForm.checkPass" autocomplete="off"
                          placeholder="确认密码" type="password" show-password></el-input>
                      </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                      <el-button type="primary" @click="updatePassword()">确 定</el-button>
                  </span>
            </el-dialog>

      </div>

      <!-- <div class="head_content">
        <h3>欢迎来到轩忆的myblog</h3>
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
        <div>{{user.username}}</div>

         <div class="maction">
            <span><router-link to="/blogs"><el-link type="info">主页</el-link></router-link> </span>
            <el-divider direction="vertical"></el-divider>
            <span><router-link to="/blog/add" style="text-decoration: none;"><el-link type="success">发表博客</el-link></router-link></span>
            <el-divider direction="vertical"></el-divider>
            <span><router-link to="/login" style="text-decoration: none;"><el-link type="danger">退出</el-link></router-link></span>
        </div>
      </div> -->

    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {

  data () {
    // 确认密码验证
    var validateRePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空'))
      } else if (value !== '' && value !== this.passwordForm.pass) {
        // console.log('确认密码验证')
        callback(new Error('确认密码与密码不一致！'))
      }
      callback()
    }
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      // 是否隐藏导航条
      tabNav: true,
      // 用于判断向上滚
      scrollUp: 0,
      // 文章标题名
      articleTitle: '',

      // 帮助提示框
      HelpDialogVisible: false,
      // 显示与隐藏修改密码
      passwordDialogVisible: false,
      // 密码表单
      passwordForm: {
        oldPass: '',
        pass: '',
        checkPass: ''
      },
      passwordFormRules: {
        oldPass: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { validator: validateRePassword, trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState(
      {
        userInfo: state => state.user.userInfo,
        backUrl: state => state.user.backUrl
      }
    )
  },
  methods: {
    // 鼠标滚动监听,下滑超过80隐藏
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var scroll = scrollTop - this.scrollUp
      this.scrollUp = scrollTop
      if (scroll > 0) {
        this.tabNav = false
        // console.log('向下滚')
      } else {
        this.tabNav = true
        // console.log('向上滚')
      }
      // // console.log(scrollTop)
      // if (scrollTop > 80) {
      //   // console.log('隐藏')
      //   this.tabNav = false
      // } else if (scrollTop < 80) {
      //   this.tabNav = true
      // }
    },
    // 退出登陆
    async back () {
      window.location.reload()

      const { data: res } = await this.$http.post('/logout')
      console.log(res)
      if (res.code !== 200) return
      this.$message.success('退出成功！')
      window.localStorage.clear()
      // 删除vuex里的用户数据
      this.$store.commit('clearUserInfo')
    },
    // 提交搜索文章名
    submitArticleTitle (title) {
      this.$store.commit('updateArticleTitle', title)
    },
    clearArticleTitle (title) {
      if (title === '') {
        this.$store.commit('clearArticleTitle')
      }
    },

    // 打开帮助提示框
    toHelpDialog () {
      this.HelpDialogVisible = true
    },
    // 打开修改密码提示框
    toPasswordDialog () {
      this.passwordDialogVisible = true
    },
    // 关闭修改密码提示框
    closePasswordDialog () {
      this.$refs.passwordFormRef.resetFields()
    },
    // 更新密码
    updatePassword () {
      this.$refs.passwordFormRef.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post('/user/updatePassword', {
            oldPassword: this.passwordForm.oldPass,
            newPassword: this.passwordForm.checkPass
          })
          //   console.log('修改密码', res)
          if (res.code !== 200) {
            return this.$message.error('密码修改失败，原密码错误！')
          } else {
            this.$message.success('密码修改成功，建议重新登陆！')
            this.passwordDialogVisible = false
          }
        }
      })
    }

  },
  mounted () {
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)
  },
  created () {
    // 获取到个人信息，存储到vuex
    if (typeof (this.userInfo.username) === 'undefined') {
      // this.$message.warning('获取用户信息！')
      this.$store.dispatch('getUserInfo')
    }
  }

}
</script>

<style lang="less" scoped>
    .nav_content{
      z-index: 9;
      .nav_box{
        background-color: #fff;
        // background: rgba(255, 255, 255, 0.7);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 1%;
        padding: 0 10%;
        transition: all 0.8s;
        opacity: 0.9 !important;

        .title_box{
          color: rgb(112, 240, 144);
        }

        ul{
          li{
            margin:0 1rem;
            a{
              transition: all 0.9s;
            }
            a:hover{
              color:#409eff;
            }
          }
        }

          // 代码写的不错，可以对头像展示重复使用了
         .el-avatar{
                // border: 1px solid rgb(243, 219, 190);
                background-color: rgb(252, 251, 249);
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                padding: 8px;
                position: relative;
                img{
                    border-radius: 50%;
                    width: 90%;
                    height: 90%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-color: #fff;
                    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                }
            }
      }
      @media screen and (max-width: 1000px){
        .nav_box{
          padding: 0;
        }
      }
      .yes{
        height: 57px;
      }
      .no{
        height: 0;
        padding: 0 !important;
        margin: 0 !important;
        *{
          display: none;
        }
      }

    }
    .head_content{
      position: absolute;
      top:60%;
      left: 50%;
      transform: translate(-50%, -50%);

    }
    @media screen and (max-width: 1000px){
      .head_content{
        // margin-top: 10%;
      }
    }
    .m-content{
        max-width: 1000px;
        margin: 0 auto;
        text-align: center;
    }
    .maction{
        margin: 0 15px;
    }

    .passwordFormClass{
    padding-right: 20px;
}
</style>
